import { 
    ref, 
    reactive,
    onMounted,
    toRefs, 
    defineComponent,
    // getCurrentInstance
} from "vue"
import histogram from '../../components/histogram/histogram.vue'
import pie from '../../components/pie/pie.vue'
// import router from '../router'
import { 
    post,
    get
} from '../../assets/http'
import {
    getTime
} from '../../assets/common'
import { 
    Notify,
    Toast
} from 'vant'
import html2canvas from 'html2canvas'

export default defineComponent({
    name: "app",
    components:{
        histogram,
        pie
    },


    
    // emits:{
    //     close: val => {
    //         if(val){
    //             console.log(val)
    //             return true
    //         }else{
    //             return false
    //         }
    //     }
    // },



    // setup相当于vue2.0的 beforeCreate和 created，是vue3新增的一个属性，所有的操作都在此属性中完成
    setup() {




        // 拿到当前组件 this(ctx)
        // const { 
        //     ctx
        // } = getCurrentInstance()






        // 通过reactive 可以初始化一个可响应的数据，与Vue2.0中的Vue.observer很相似
        // 在 vue2 中的data，在 vue3 用reactive代替
        // 数据相关
        const data1: any = {
            xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            yData: [120, 200, 150, 80, 70, 110, 130],
        }
        const data2: any = {
            xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            yData: [120, 200, 150, 80, 70, 110, 130],
        }
        const data3: any = [
            {value: 335, name: '男'},
            {value: 310, name: '女'},
        ]
        const mainData = reactive({
            num1: ref(0),
            num2: ref(0),
            data1: ref(data1),
            data2: ref(data2),
            data3: ref(data3),

        })
        // 获取历史人数
        const history = () => {
            get('/home/history',{}).then(res => {
                console.log(res)
            }).catch(error => {
                console.log(error)
            })
        }
        // 获取当天人数
        const today = () => {
            get('/api/home/today',{}).then(res => {
                console.log(res)
            }).catch(error => {
                console.log(error)
            })
        }
        // 客流趋势图
        const monthNum = () => {
            get('/api/home/monthNum',{}).then(res => {
                console.log(res)
            }).catch(error => {
                console.log(error)
            })
        }
        // 性别比例
        const getSexRatio = () => {
            get('/api/home/getSexRatio',{}).then(res => {
                console.log(res)
            }).catch(error => {
                console.log(error)
            })
        }
        // 年龄趋势
        const getAge = () => {
            get('/api/home/getAge',{}).then(res => {
                console.log(res)
            }).catch(error => {
                console.log(error)
            })
        }
        // 下载图片
        const histogram1 = ref(null)
        const download1 = () => {
            histogram1.value.download()
        }
        // 下载图片
        const histogram2 = ref(null)
        const download2 = () => {
            histogram2.value.download()
        }
        // 下载图片
        const pie = ref(null)
        const download3 = () => {
            pie.value.download()
        }




        // 日历相关
        const datetime = reactive({
            minDate: ref(new Date('2020-01-01')),
            maxDate: ref(new Date('2023-01-01')),
            popupShow: ref(false),
            startTime: ref(getTime(new Date())),
            endTime: ref(getTime(new Date())),
            text: ref(''),
            date: ref( new Date())
        })
        // 打开日历
        const openDate = (text: string) => {
            if(text == 'start'){
                datetime.date = new Date(datetime.startTime)
            }
            if(text == 'end'){
                datetime.date = new Date(datetime.endTime)
            }
            datetime.text = text
            datetime.popupShow = true
        }
        // 选择日历后返回值
        const dateTimeConfirm = (val) => {
            if(datetime.text == 'start'){
                datetime.startTime = getTime(val)
            }
            if(datetime.text == 'end'){
                datetime.endTime = getTime(val)
            }
            datetime.popupShow = false
        }
        // 日历搜索
        const search = () => {
            if(new Date(datetime.endTime).getTime() < new Date(datetime.startTime).getTime()){
                Notify({ type: 'danger', message: '结束时间需大于开始时间' });
                return false
            }
            // 执行后续操作
            Toast.loading({
                message: '加载中...',
                forbidClick: false,
                overlay: true,
                duration: 0
            });
            setTimeout(()=>{
                Toast.clear();
            },1000)
        }




        // 弹窗相关
        const data = reactive({
            // ref 根据给定的值，创建响应式的数据对象，返回一个对象
            // 可以使用 isRef 判断是否由ref创建
            show: ref(false),
            text1: ref(''),
            text2: ref(''),
            text3: ref(''),
            title: ref(''),
            name: ref(''),
            text: ref(''),

        });
        let number = 0
        // 关闭弹窗
        const bindcloseshow = () => {
            data.show = false
        }
        // 创建声明方法和声明数据状态是一样的，return返回，就可以调用这个方法
        // 获取报警阈值
        const getAlarmThreshold = () => {
            get('/api/home/getAlarmThreshold',{}).then(res => {
                console.log(res)
            }).catch(error => {
                console.log(error)
            })
        }
        // 修改报警阈值
        const updateAlarmThreshold = (val: string) => {
            post('/api/home/updateAlarmThreshold ',{
                data: val
            }).then(res => {
                bindcloseshow()
                console.log(res)
            }).catch(error => {
                console.log(error)
            })
        }
        // 获取当年人口基数
        const getBaseNum = () => {
            get('/api/home/getBaseNum',{}).then(res => {
                console.log(res)
            }).catch(error => {
                console.log(error)
            })
        }
        // 修改报警阈值
        const updateBaseNum = (val: string) => {
            post('/api/home/updateBaseNum',{
                data: val
            }).then(res => {
                bindcloseshow()
                console.log(res)
            }).catch(error => {
                console.log(error)
            })
        }
        // 开启弹窗
        const change = (num: number, text: string) => {
            switch(num){
                case 1:
                    data.name = '新标语'
                    break
                case 2:
                    data.name = '新基数'
                    break
                case 3:
                    data.name = '新阀值'
                    break
                default:
                    break
            }
            data.show = true
            data.text = text
            number = num
        }
        // 弹窗修改确认
        const onsubmit = (val: string) => {
            switch(number){
                case 1:
                    
                    break
                case 2:
                    updateAlarmThreshold(val)
                    break
                case 3:
                    updateBaseNum(val)
                    break
                default:
                    break
            }
        }



        
        const html2canvas1 = ref(null)
        // 总体相关
        const all = reactive({
            span: ref(false),
            src: ref('')
        })
        const createPicture = () => {
            html2canvas(html2canvas1.value,{
                backgroundColor: null
            }).then((canvas) => {
                const link = document.createElement("a");
                link.href = canvas.toDataURL();
                link.setAttribute("download","图片.png");
                link.style.display = "none";
                document.body.appendChild(link);
                link.click();
            });
        }
        // Vue3 生命周期钩子不是全局可调用，需要另外从Vue引入
        onMounted(() => {
            getAlarmThreshold()
            getBaseNum()
            history()
            today()
            monthNum()
            getSexRatio()
            getAge()
            const w = document.documentElement.offsetWidth || document.body.offsetWidth;
            all.span = w<500 ? false : true

        });



        // 在Vue3.0中，所有的数据和方法都通过在setup 中 return 出去，然后在template中使用
        return {
            // toRefs将reactive创建的响应式对象，转化为普通的对象，这对象上的每一个节点，都是ref类型的响应式数据             
            data,
            datetime,
            mainData,
            histogram1,
            histogram2,
            pie,
            html2canvas1,
            createPicture,
            ...toRefs(all),
            change,
            onsubmit,
            bindcloseshow,
            openDate,
            dateTimeConfirm,
            search,
            download1,
            download2,
            download3,
              
        
        };



    },
})